<template>
  <div>
    <el-card style="max-width: 98%">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="form.category" placeholder="选择商品分类">
            <el-option
              v-for="item in catelist"
              :key="item.id"
              :label="item.cateName"
              :value="item.cateName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number
            style="width: 100%"
            v-model="num"
            :min="1"
            :max="100"
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            method="post"
            list-type="picture-card"
            :on-success="handleSuccess"
            :auto-upload="true"
          >
            <el-icon><Plus /></el-icon>

            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon><Download /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img style="width: 100%" w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">添加商品</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { ElMessage, type UploadFile } from 'element-plus'
import { fetchGoodsAdd, fetchGoodsCatelist } from '../api/goods/index'
import { useRouter } from 'vue-router'
const router = useRouter()
// do not use same name with ref
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const imgUrl = ref('')
const catelist = ref('')

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  console.log(file)

  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
const form = reactive({
  name: '黄金蛋炒饭',
  category: '炒饭系列',
  desc: '金黄软糯，蛋香浓郁，粒粒分明，色香味俱佳，营养均衡，令人回味无穷。',
})

const num = ref('66')
const handleChange = (value: number) => {
  console.log(value)
}

const handleSuccess = (response, file, fileList) => {
  imgUrl.value = response.imgUrl
}

const onSubmit = async () => {
  const data = {
    name: form.name,
    category: form.category,
    price: num.value,
    imgUrl: imgUrl.value,
    goodsDesc: form.desc,
  }
  const res = await fetchGoodsAdd(data)
  if (res.msg === 0) {
    ElMessage({
      type: 'success',
      message: '添加成功',
    })
    router.replace({
      path: '/goods/list',
    })
  } else {
    ElMessage({
      type: 'warning',
      message: '添加失败',
    })
  }
}
onMounted(async () => {
  const res = await fetchGoodsCatelist({
    currentPage: 1,
    pageSize: 100,
  })
  catelist.value = res.data.data
})
</script>

<style scoped></style>
